<script setup lang="ts">

// 预定义主题颜色
import {DEFAULT_PRIMARY} from "@/config/config";
import {useSettingsStoreWithOut} from "@/stores/modules/settings";
import {computed, ref} from "vue";
import mittBus from "@/utils/mittBus";
import {useTheme} from "@/hooks/useTheme";
import SwitchDark from "@/components/ SwitchDark/src/SwitchDark.vue";

const { changePrimary }  = useTheme()

const colorList = [
    DEFAULT_PRIMARY,
    '#DAA96E',
    '#0C819F',
    '#722ed1',
    '#27ae60',
    '#ff5c93',
    '#e74c3c',
    '#fd726d',
    '#f39c12',
    '#9b59b6',
]

const settingsStore = useSettingsStoreWithOut()
const themeConfig = computed(()=> settingsStore.themeConfig)

//打开主题设置
const drawerVisible = ref(false)
mittBus.on('openThemeDrawer', ()=>{
    drawerVisible.value = true;
})

</script>

<template>

  <el-drawer title="主体设置" v-model="drawerVisible" size="300px">
      <el-divider class="divider" content-position="center">全局主题</el-divider>

      <div class="theme-item">
          <span>主体颜色</span>
          <el-color-picker
                  v-model="themeConfig.primary"
                  :predefine="colorList"
                  @change="changePrimary"
          >
          </el-color-picker>
      </div>

      <div class="theme-item">
          <span>暗黑模式</span>
           <SwitchDark/>
      </div>

  </el-drawer>

</template>

<style scoped lang="scss">

.theme-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0;
}

</style>